<template>
  <!--长城博览-->
  <v-container>
      <v-layout wrap>
        <v-flex xs12 sm12 md12 lg12>
          <v-layout align-center>
            <v-flex lg1 md1 class="hidden-md-and-down">
              <img src="@/assets/images/index/ico-7.png" class="d-inline">
            </v-flex>
            <v-flex class="text-lg-left">
              <h3 class=" font-weight-black primary--text d-inline" ><span class="font-weight-black headline">长城博览</span>非遗展示系列活动</h3>
            </v-flex>
            <v-spacer></v-spacer>
            <v-flex class="text-lg-right">
              <router-link to="/more/2000" style="">
                <img src="@/assets/images/index/ico-2.png">
                <img src="@/assets/images/index/ico-3.png">
              </router-link>
            </v-flex>
          </v-layout>
        </v-flex>
        <v-flex>
            <v-tabs color="grey lighten-2" fixed-tabs grow show-arrows slider-color="primary">
              <v-tabs-slider color="primary" style="height:5px;"></v-tabs-slider>
							<v-tab v-for="(item,index) in data" :key="index" ripple> {{item.title}}</v-tab>
							<v-tab-item v-for="(item,index) in data" :key="index">
                <v-card hover :to="'/detail/' + item.id" class="ma-2" height="360px" >
                  <v-card-media :src="MImage(item.image)" height="300px"></v-card-media>
                  <v-card-title>{{item.title}}</v-card-title>
                </v-card>
              </v-tab-item>
            </v-tabs>
        </v-flex>
      </v-layout>
  </v-container>
  <!-- <div id="greatwall-box">
		<div class="Taihang-top">
      <div class="Taihang-top-left">
          <img src="@/assets/images/index/ico-7.png" style="margin-top:30px;">
          <h3>长城博览<span>非遗展示系列活动</span></h3>
            <img  class="img2" src="@/assets/images/index/ico-4.png">
      </div>
      <div class="Taihang-top-right">
            <img src="@/assets/images/index/ico-2.png">
             <a href="#"><img src="@/assets/images/index/ico-3.png" style="margin-top:5px;"></a>
      </div>
    </div>
		<div class="wrap">
			<ul class="categroy-list">
				<li>巧手匠心</li>
				<li>功夫表演</li>
				<li>挠羊比赛</li>
				<li>戏曲展演</li>
			</ul>
			<ul class="content-list">

				<li>
					<div class="img">
						<a href="###"  target="_blank">
              <img src="@/assets/images/index/0.jpg" alt="pic">
            </a>
					</div>
					<div class="desc">
						<h4><a class="title" href="###" target="_blank">{$gw.title}</a></h4>
						<p> dddddddddddddddddd<a href="###">more+</a></p>
						<span class="meta time"><i></i>{$gw.periodical_date}</span>
						<span class="meta pos"><i></i>{$gw.site}</span>
					</div>
				</li>
			</ul>
		</div>
	</div> -->
<!--长城博览end-->
</template>
<script>
export default {
  name: '',
  props: {
    data: {
      type: Array,
      default: []
    }
  },
  data () {
    return {}
  },
  created: function () {
  },
  methods: {
    goMorePage: function () {
      this.$router.push({ path: 'more/2000' })
    }
  }
}
</script>
<style>
a.v-tabs__item--active {color:#EA3324 !important; }
</style>

<style scoped>
/*长城博览*/

#greatwall-box {
    margin: 0 auto;
    width: 1190px;
    height: 330px;
    padding-bottom: 56px;
}

#greatwall-box .Taihang-top {
    width: 100%;
    overflow: hidden;
}

#greatwall-box .title {
    height: 108px;
}

#greatwall-box .wrap {
    overflow: hidden;
}

#greatwall-box .wrap .categroy-list {
    float: left;
    position: relative;
    top: 2px;
    left: 2px;
    width: 130px;
    margin-right: 30px;
}

#greatwall-box .categroy-list li {
    margin-bottom: 15px;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 30px;
    background: #a0a0a0;
    color: #fff;
}

#greatwall-box .categroy-list li:hover,
#greatwall-box .categroy-list li.active {
    color: #c5000c;
    outline: 2px solid #c8000b;
    background: #fff;
}

#greatwall-box .wrap .content-list {
    float: left;
    width: 1030px;
}

#greatwall-box .content-list li {
    overflow: hidden;
}

#greatwall-box .content-list .img {
    float: left;
    width: 500px;
    height: 262px;
    margin-right: 26px;
}

#greatwall-box .content-list .img a,
#greatwall-box .content-list .img img {
    display: inline-block;
    width: 100%;
    height: 100%;
}

#greatwall-box .content-list .desc {
    float: left;
    width: 460px;
}

#greatwall-box .content-list .desc .title {
    display: block;
    position: relative;
    margin: -6px 0 10px;
    height: 50px;
    line-height: 50px;
    text-indent: 1em;
    font-size: 18px;
    font-weight: bold;
    color: #1b1b1b;
    border-bottom: 2px solid #bfbfbf;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#greatwall-box .content-list .desc .title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -13px;
    width: 6px;
    height: 26px;
    background: #d81b17;
}

#greatwall-box .content-list .desc p {
    position: relative;
    margin-bottom: 20px;
    line-height: 24px;
    max-height: 96px;
    font-size: 14px;
    color: #383838;
}

#greatwall-box .content-list .desc p a {
    position: absolute;
    right: 10px;
    bottom: 0;
    font-style: italic;
    color: #ccc;
}

#greatwall-box .content-list .desc p a:hover {
    color: #d81b17;
}

#greatwall-box .content-list .meta {
    display: block;
    line-height: 38px;
    font-size: 16px;
    font-family: '微软雅黑';
    color: #383838;
    text-indent: 40px;
    /* background-image: url('../img/index/meta.jpg'); */
    background-repeat: no-repeat;
}

#greatwall-box .content-list .time {
    background-position: 0 0;
}

#greatwall-box .content-list .pos {
    background-position: 0 -38px;
}

.Taihang-top-left,
.Taihang-top-left img,
.Taihang-top-left h3 {
    float: left;
    color: #1e1e1e;
}

.Taihang-top-left img {
    margin-top: 20px;
}

.Taihang-top-left h3 {
    margin-top: 50px;
    margin-left: 20px;
    color: #F00;
    font-size: 30px;
    font-weight: 800;
    font-family: "宋体";
}

.Taihang-top-left h3 span {
    font-size: 24px;
}

.Taihang-top-left .img2 {
    margin-top: 60px;
    margin-left: 10px;
}

.Taihang-top-left2 h3 {
    margin-top: 60px;
}

.Taihang-top-left2 .img2 {
    margin-top: 70px;
}
.Taihang-top-left3 h3 {
    font-size: 24px;
}

.Taihang-top-left3 h3 span {
    font-size: 30px;
}
.Taihang-top-right {
    float: right;
    margin-top: 60px;
}

.Taihang-top-right img {
    margin-left: 5px;
}

</style>

